<template>
	<div class="app-contain">
	<head-top></head-top>	
	<div class="bg-fa of nxb-box" id="aCoursesList">
		<div class="bg-fff of">
			<section class="container">
				<section class="c-s-dl bg-fff c-cou-box plan-nav-box">
					<dl>
						<div class="fl-wrap"> <dt><span class="c-666 fsize14">状态：</span></dt>
							<dd class="c-s-dl-li fl">
								<ul class="clearfix">
									<li :class="page.enrollStatus == ''?'current':''">
										<a href="javascript:void(0)" @click="updatePlanStatus('')">全部</a>
									</li>
									<li :class="page.enrollStatus == 1?'current':''">
										<a href="javascript:void(0)" @click="updatePlanStatus(1)">进行中</a>
									</li>
									<li :class="page.enrollStatus == 2?'current':''">
										<a href="javascript:void(0)" @click="updatePlanStatus(2)">已截止</a>
									</li>
								</ul>
							</dd>
							
						</div>
					</dl>
				</section>
			</section>
		</div>
		<section class="container">
			<section class="plan-sort-list "  style="min-height:300px">
				<section class="no-data-wrap" v-if="!taskList"> <em class="no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam"> 暂无内容...</span> </section>
				<section class="plan-item" v-for="item in taskList" v-else>
					<div class="plan-i-img">
						<a href="javascript:void(0);"  @click="routerLink(item.id)"> <img :src="domain + item.logo"  class="img-responsive"> </a>
					</div>
					<h3 class="plan-i-title" :title="item.name"> <span class="plan-i-title txtOf" style="display:inline-block;max-width:500px;" target="_blank">{{item.name}}</span> <span class="j-c-state" v-show="item.enrollStatus == 1">进行中</span> </h3>
					
					<div class="clearfix of mt20 cj-cou-ds"> 
						<span title=""> 
							<em class="icon24 student-icon"></em> 
							<tt class="f-fM fsize16 c-666 vam">{{item.finishNum}}人已报名</tt> 
						</span> 
						<span class="ml30"> 
							<em class="icon24 plan-time-icon"></em>
							<tt class="f-fM fsize16 c-666 vam">{{item.createtime}} 至   {{item.endtime}} </tt>
						</span>
					</div>
					<div class="mt20">
						<span class=" pc-box-show fsize16 c-666">报名截止时间：{{item.enrollEndtime}}</span>	
					</div>
					
					<div class="plan-sign-btn mt50" v-if="item.enrollStatus == 1">
						<a href="javascript:void(0);" class="bm-lr-btn no-permit-btn" @click="routerLink(item.id)">查看详情</a>
						
					</div>
					<div class="plan-sign-btn mt50 plan-sign-finish" v-else>
						<a href="javascript:void(0);" class="bm-lr-btn no-permit-btn">已结束</a> 
					</div>
				</section>
				
			</section>
			<div class="page-mar-top tac" style="margin-top: 30px;">
				<el-pagination
				  background
				  layout="prev, pager, next"
				  :current-page = "page.currentPage"
				  :page-count="totalPageSize"
				  :total="totalResultSize"
				  @current-change="currentChange">
				</el-pagination>
				
			</div>
		</section>
	</div>
	<foot-bootom></foot-bootom>
	</div>
</template>

<script>
	import {domainUrl} from '@/utils/index'
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	import {getTaskList} from '@/api/plan'
	export default {
		name:'planList',
		components: { //引入组件
			headTop,
			footBootom
		},
		data() {
			return {
				domain:"",
				taskList:[],
				totalResultSize:1,
				totalPageSize:1,
				page:{
					currentPage:1,
					enrollStatus:''
				},
			}
		},
		created(){
			this.getTaskList({currentPage:1});
			this.domain = domainUrl();
		},
		methods:{
			getTaskList(page){
				getTaskList(page).then((res)=>{
					let datas = res.entity;
					if(datas&&datas.data.length>0){
						this.taskList = res.entity.data;
						this.totalResultSize = res.entity.page.totalResultSize;
						this.totalPageSize = res.entity.page.totalPageSize
						this.page["currentPage"] = res.entity.page.currentPage;	
					}else{
						this.taskList = [];
					}
					

				})
			},
			currentChange(val){//分页
				this.page["currentPage"] = val;
				this.getTaskList(this.page);
			},
			updatePlanStatus(val){
				this.page["enrollStatus"] = val;
				this.getTaskList(this.page);
			},
			routerLink(id){
				this.$router.push({
					path: '/planInfo',
					query: {
						id: id,
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'plan';
</style>